<template>
  <div>
    <div class="createGroup"
         @click="newGroupEvent('createGroup')">创建群
    </div>

    <div class="newGroup"
         @click="newGroupEvent('newGroup')">群通知
    </div>
    <!-- 遍历了所有的群和群里的好友 -->
    <el-menu unique-opened
             style="border-right:0">
      <el-submenu index="1">
        <template slot="title">
          <span>管理的群</span>
        </template>
        <el-submenu v-for="item in groupManageData"
                    :key="item.groupID"
                    :index="item.groupID">
          <template slot="title">
            <div @click="reviseToGroup(item)">
              <el-avatar :src='item.icon'
                         size='small'></el-avatar>
              <span>{{item.groupName}}</span>
              (<span>{{item.peopleCount}}</span>)
            </div>

          </template>
          <el-menu-item v-for="it in item.groupPeople"
                        :key="it.userID">
            <div class="groupWrap"
                 style="position:relative;font-size:13px">
              <img :src='it.headPortrait'
                   style="width:28px;height:28px;border-radius:50%"
                   @click="showPersonID=it.userID,personInfoDialog=true">
              <span>{{it.nickname}}</span>
              <span class="el-icon-close deleteUser"
                    @click="queryDeleteDialog=true,deleteUserID=it.userID,deleteGroupID=item.groupID"></span>
            </div>
          </el-menu-item>
        </el-submenu>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <span>加入的群</span>
        </template>
        <el-submenu v-for="item in groupJoinData"
                    :key="item.groupID"
                    :index="item.groupID">
          <template slot="title">
            <div @click="reviseToGroup(item)">
              <el-avatar :src='item.icon'
                         size='small'></el-avatar>
              <span>{{item.groupName}}</span>
              (<span>{{item.peopleCount}}</span>)
            </div>

          </template>
          <el-menu-item v-for="it in item.groupPeople"
                        :key="it.userID">
            <img :src='it.headPortrait'
                 style="width:28px;height:28px;border-radius:50%"
                 @click="showPersonID=it.userID,personInfoDialog=true">
            <span>{{it.nickname}}</span>
          </el-menu-item>
        </el-submenu>
      </el-submenu>

    </el-menu>
    <!-- 删除用户弹窗 -->
    <el-dialog title="提示"
               :visible.sync="queryDeleteDialog"
               width="30%"
               append-to-body>
      <span>是否将该用户踢出群聊?</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="queryDeleteDialog = false"
                   size="mini">取 消</el-button>
        <el-button type="primary"
                   @click="deleteUser()"
                   size="mini">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 显示某个人的信息 -->
    <el-dialog :visible.sync="personInfoDialog"
               width="50%"
               append-to-body
               v-if="personInfoDialog">
      <user-info :account="showPersonID"
                 style="height:300px"></user-info>
    </el-dialog>

  </div>
</template>
<script>
import UserInfo from '../components/userinfo/UserInfo.vue'
export default {
  name: 'Group',
  props: ['groupManageData', 'groupJoinData'],
  components: {
    UserInfo
  },
  data () {
    return {
      toGroupInfo: {
        avatar: '',
        nickName: '',
        groupID: ''
      },
      // 询问是否删除这个用户弹窗
      queryDeleteDialog: false,
      // 记录要删除的用户Id
      deleteUserID: '',
      // 记录一个用户所属的群
      deleteGroupID: '',
      // 显示个人信息
      personInfoDialog: false,
      // 记录要显示的用户的信息
      showPersonID: ''
    }
  },
  methods: {
    newGroupEvent (data) {
      if (data === 'newGroup') this.dot_notification = false
      this.$emit('group', data)
    },
    // 点击当前群
    reviseToGroup (data) {
      // console.log(data)
      this.toGroupInfo.avatar = data.icon
      this.toGroupInfo.nickName = data.groupName
      this.toGroupInfo.groupID = data.groupID
      this.$emit('reviseToGroup', this.toGroupInfo)
    },
    deleteUser () {
      if (window.sessionStorage.getItem('selfInfo') === this.deleteUserID) {
        this.queryDeleteDialog = false
        return this.$message.error('不能删除自己')
      }
      this.$http.get('deleteSingleUser', { params: { groupID: this.toGroupInfo.groupID, userID: this.deleteUserID } }).then((response) => {
        const res = response.data
        if (res.code !== 200) return this.$message.error(res.msg)
        this.$message.success(res.msg)
        // 刷新群的信息
        // 通知上级刷新群列表
        this.queryDeleteDialog = false
        this.$emit('refreshGroup')
      })
    }
  }
}
</script>
<style lang="less" scoped>
.createGroup,
.newGroup {
  height: 56px;
  text-align: left;
  line-height: 56px;
  margin-left: 20px;
  cursor: pointer;
  position: relative;
}

.deleteUser {
  position: absolute;
  right: 0;
  top: 20px;
  color: rgb(84 81 81 / 87%);
  font-size: 13px !important;

  :hover {
    color: aqua;
  }
}

.dot {
  position: absolute;
  left: -10px;
  top: 17px;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  background-color: #ff0000a6;
}
</style>
